
<template>
    <ContentWrap class="container-box">
        <!-- 未安装防火墙的遮盖层 -->
        <Install v-model="installVisible" @confirm="queryFirstHandle"></Install>
        <el-form :model="query" class="mb-20px" @submit.enter.prevent="queryFirstHandle">
            <ElRow :gutter="20" justify="space-between">
                <ElCol :span="14">
                    <div class="">
                        <el-button type="primary" @click="infoModalVisible = true">添加端口规则</el-button>
                        <el-button type="primary" :loading="reLoading" @click="systemctlHandle">规则生效</el-button>
                    </div>
                </ElCol>
                <!-- <ElCol class="" :span="10">
                    <div class="flex justify-end">
                        <el-input class="max-w-[200px]" clearable v-model="query.keyword" placeholder="请输入数据库名称">
                            <template #suffix>
                                <Icon icon="ant-design:search-outlined" :size="18"></Icon>
                            </template>
                        </el-input>
                    </div>
                </ElCol> -->
            </ElRow>
        </el-form>
        <el-table :data="pageData.list" v-loading="loading" header-row-class-name="cc-table" border
            highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="protocol" label="协议" width="100" show-overflow-tooltip />
            <el-table-column prop="port" label="端口" width="100" show-overflow-tooltip />
            <el-table-column prop="" label="状态" width="80" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag v-if="(scope.row.status === 0)" size="small" type="danger">未生效</el-tag>
                    <el-tag v-else size="small" type="success">生效</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="policy" label="策略" width="100" show-overflow-tooltip />
            <el-table-column prop="ip" label="来源" width="180" show-overflow-tooltip />
            <el-table-column prop="time" label="时间" width="180" show-overflow-tooltip />
            <el-table-column prop="note" label="备注" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="delHandle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end p-t-10px">
            <el-pagination v-model:current-page="queryPage.pageNumber" v-model:page-size="queryPage.pageSize"
                :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
                @size-change="queryFirstHandle" @current-change="searchHandle" />
        </div>
    </ContentWrap>
    <infoModal v-model="infoModalVisible" @confirm="searchHandle"></infoModal>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getListAllFireWallAPI, setRemovePortFireWallAPI, putSystemctlFireWallAPI } from "@/api/systemMonitor/index"
import { ContentWrap } from '@/components/ContentWrap'
import infoModal from './components/infoModal.vue'
import Install from './components/Install.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

//table loading
const loading = ref(false)
//规则生效 loading
const reLoading = ref(false)
const infoModalVisible = ref(false)
//是否安装防火墙的弹窗
const installVisible = ref(false)
const query = reactive({
    keyword: ""
})
const queryPage = reactive({
    pageNumber: 1,
    pageSize: 10
})
const pageData = reactive({
    list: null,
    total: 0
})

onMounted(() => {
    queryFirstHandle()
})
//查询第一页
const queryFirstHandle = () => {
    queryPage.pageNumber = 1
    searchHandle()
}
//查询
const searchHandle = () => {
    loading.value = true;
    getListAllFireWallAPI({ ...queryPage }).then((res) => {
        pageData.list = res.data.list
        pageData.total = res.data.total
        //如果已经安装，但是依旧显示true。 把这个改成false
        if (installVisible.value === true) {
            installVisible.value = !installVisible.value
        }
    }).catch((res) => {
        if (res.data.code === 501) {
            installVisible.value = true;
        } else {
            ElMessage.error(res.data.msg)
        }
    }).finally(() => {
        loading.value = false;
    })
}
//删除
const delHandle = (row) => {
    ElMessageBox.confirm('确认要删除这一项?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'delete-dialog'
    }).then(() => {
        setRemovePortFireWallAPI({ port: row.port, ip: row.ip, }).then(() => {
            ElMessage.success("删除成功")
            queryFirstHandle();
        })
    }).catch(() => { })
}
// 规则生效
const systemctlHandle = () => {
    reLoading.value = true;
    putSystemctlFireWallAPI({ opt: 'reload' }).then(() => {
        ElMessage.success("执行成功")
        queryFirstHandle();
    }).finally(() => {
        reLoading.value = false;
    })
}
</script>
<style lang="less" scoped>
.container-box {
    position: relative;
}
</style>
